code:
<img src="../images/car2.jpg" style="width:100%;">
revision:
Responsive web design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge a website, in order to make it look good on all devices (desktops, tablets, and phones).
Mobile-first approach : start designing for the smallest screens and progressively enhance for larger devices. This ensures better performance and user experience.
Fluid layouts : use relative units instead of fixed pixels: "percentages (%)" for widths; "rem/em" for typography and spacing; "vw/vh" for viewport-based sizing; "fr" for flexible grid tracks
Flexible media : Images and videos should scale within their containers without breaking the layout.
Step 1: essential HTML setup : the "viewport meta" tag is essential for proper scaling on mobile devices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Content here -->
</body>
</html>
Always include this!! This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling; It tells mobile browsers to render at device width, not desktop zoom.
Use a lightweight CSS reset (e.g., "modern-normalize" or "@layer reset" in CSS).
Set "box-sizing: border-box;" globally.
Step 2: CSS foundation - fluid typography & spacing
Avoid fixed "px" for text and spacing. Use relative units and fluid scaling.
/* Base styles - mobile first */
* {box-sizing: border-box; margin: 0; padding: 0;}
body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333;}
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px;}
/* Fluid typography */
h1 {font-size: clamp(1.5rem, 5vw, 2.5rem);}
p {font-size: clamp(1rem, 2vw, 1.2rem);}
:root {
--min-font: 1rem;
--max-font: 1.5rem;
--min-vw: 320px;
--max-vw: 1440px;
}
body {
font-size: clamp(var(--min-font), 0.8vw + 0.8rem, var(--max-font));
line-height: 1.5;
}
.container {
width: min(90%, 1200px);
margin-inline: auto;
padding-block: clamp(1.5rem, 3vw, 3rem);
}
"clamp()" = fluid scaling between min/max without media queries.
"min()/max()"" replace complex "calc()" + media query combos.
Use "rem" for spacing, "%" or "vw" for widths.
Step 3: layout systems (no fixed widths)
/* Flexbox for 1D layouts (nav, cards, forms) */
.nav {
display: flex;
flex-wrap: wrap;
gap: clamp(0.5rem, 2vw, 1.5rem);
}
/* Grid for 2D layouts (dashboards, galleries) */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 1rem;
}
/* CSS Grid Layout */
.grid { display: grid; grid-template-columns: 1fr; gap: 20px;}
/* Tablet and up */
@media (min-width: 768px) {
.grid {grid-template-columns: repeat(2, 1fr); }
}
/* Desktop and up */
@media (min-width: 1024px) {
.grid {grid-template-columns: repeat(3, 1fr);}
}
/* Flexible Box Layout */
.flex-container {display: flex; flex-direction: column;gap: 20px;}
@media (min-width: 768px) {
.flex-container {flex-direction: row; flex-wrap: wrap;}
}
"auto-fit" + "minmax()"" creates self-responsive grids that wrap automatically.
!! Avoid "position: absolute" or "fixed" heights unless absolutely necessary.
Step 4: responsive media - responsive images
img { max-width: 100%; height: auto; display: block;}
/* Responsive images with srcset */
<img
src="image-small.jpg"
srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 900px) 768px, 1200px"
alt="Description">
in HTML body segment:
<img
src="image-800.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Descriptive text"
loading="lazy"
decoding="async"
>
!! Always use "max-width: 100%"; "height: auto;" on images.
Use "<picture>" for art direction (different crops on mobile/desktop).
SVG for icons/logos (infinitely scalable).
Set "aspect-ratio" on placeholders to prevent layout shifts.
Step 5: modern breakpoints & container queries
/* Common breakpoints (adjust based on content) */
@media (min-width: 576px) { /* Small tablets */ }
@media (min-width: 768px) { /* Tablets */ }
@media (min-width: 992px) { /* Desktops */ }
@media (min-width: 1200px) { /* Large desktops */ }
@media (min-width: 1400px) { /* Extra large */ }
/* Example: Navigation */
.nav { flex-direction: column;}
@media (min-width: 768px) {
.nav {flex-direction: row; justify-content: space-between; }
}
viewport media queries (content-driven)
/* Only when content demands it */
@media (width >= 48em) { /* ~768px */
.sidebar { display: block; }
.main { grid-column: span 2; }
}
container queries (game-changer): components respond to their parent, not the viewport:
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
.card img { width: 120px; }
}
Use container queries for reusable components (cards, modals, sidebars) that appear in different contexts.
Responsive images are images that scale nicely to fit any browser size.
Use the "width" property: if the CSS "width" property is set to 100%, the image will be responsive and scale up and down.
example
<img src="../images/car2.jpg" style="width:100%;">
A better solution, in many cases, will be to use the "max-width" property.
If the "max-width property" is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.
example
<img src="../images/car2.jpg" style="max-width:100%; height:auto;">
Show different pictures depending on browser width
example
<picture>
<source srcset="../images/img_smallflower.jpg" media=
"(max-width: 600px)">
<source srcset="../images/img_flowers.jpg" media=
"(max-width: 1500px)">
<source srcset="../images/flowers.jpg">
<img src="../images/img_flowers.jpg" alt="Flowers"
style="width:auto;">
</picture>
The text size can be set with a "vw" unit, i.e. the "viewport width". That way, the text size will follow the size of the browser window:
examples
Resize the browser window to see how the text size scales.
Use the "vw" unit when sizing the text. 2vw will set the size to 2% of the viewport width.
<div>
<h4 style="margin-left:4vw; font-size:4vw;">Responsive Text</h4>
<p class="spec" style="margin-left: 4vw; font-size:3vw;">Resize the browser
window to see how the text size scales.</p>
<p class="spec" style="margin-left:4vw; font-size:2vw;">Use the "vw" unit
when sizing the text. 2vw will set the size to 2% of the viewport width.</p>
</div>
In addition to resize text and images, it is also common to use media queries in responsive web pages. With media queries you can define completely different styles for different browser sizes.
examples
If the screen size is less than 800px, then this section will show lightblue color. Otherwise it will show a pink color.
<section>
the color of this section will change in function of the screen size.
</section>
<style>
section{margin-left:5vw; width: 40vw; height: 10vw; background:pink; border:
0.2vw dashed orange;}
@media screen and (max-width: 800px) {
section{background-color: lightblue;}
}
</style>
CSS grid with auto-fit
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;}
Container queries (modern approach)
.card-container {container-type: inline-size;}
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: 1fr 2fr;}
}
Responsive navigation
* Hamburger menu for mobile */
.nav-toggle { display: block; }
.nav-menu { display: none;}
@media (min-width: 768px) {
.nav-toggle {display: none; }
.nav-menu {display: flex;}
}